<template>
  <div class="main">
    <section>
      <el-form class="search-block" :model="listQuery" label-position="right" label-width="96px">
        <el-row type="flex">
          <el-col :span="3">
            <el-select v-model="listQuery.status">
              <el-option v-for="(item,index) in statuses" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="listQuery.categoryId" placeholder="筛选分类">
              <el-option v-for="(item,index) in categories" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="listQuery.type" placeholder="筛选类型">
              <el-option v-for="(item,index) in types" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="10" style="margin-right:10px">
            <el-date-picker
              v-model="rangeTime"
              width="300px"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00','23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="6" style="margin-right:10px">
            <el-input v-model="keywords" placeholder="输入标题或内容关键字" clearable @keyup.enter.native="search"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button v-if="rightsButtons['search']" type="primary" size="medium" plain @click="search">搜索</el-button>
          </el-col>
          <el-col :span="2">
            <el-button v-if="rightsButtons['batchAudit']" type="primary" size="medium" plain @click="batchAuditFun">批量审核</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div style="margin-bottom:10px;color:#e6a23c; cursor: pointer;" @click="auditNo">提示：当前有{{ auditNum }}条待审核</div> -->
      <el-table ref="multipleTable" v-loading="listLoading" :data="list" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="发布人" prop="nickName"></el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile"></el-table-column>
        <el-table-column align="center" label="标题" prop="title"></el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 2">单图文</span>
            <span v-if="scope.row.type === 4">多图文</span>
            <span v-if="scope.row.type === 8">视频</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分类" prop="categoryDesc"></el-table-column>
        <el-table-column align="center" label="发布时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status===1">全部</span>
            <span v-if="scope.row.status===2">待审核</span>
            <span v-if="scope.row.status===4">审核通过</span>
            <span v-if="scope.row.status===8">审核未通过</span>
          </template>
        </el-table-column>
        <el-table-column v-if="rightsButtons['change'] || rightsButtons['audit']" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status===2 && rightsButtons['audit']" type="primary" size="mini" @click="auditLook(scope.row, 'audit')">审核</el-button>
            <el-button v-if="scope.row.status!==2 && rightsButtons['change']" type="primary" size="mini" @click="auditLook(scope.row, 'change')">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </section>
    <el-dialog id="auditDialog" :title="dialogTitle" :visible.sync="auditDialogVisible" center>
      <el-form ref="auditDialogForm" size="medium" label-width="150px" :model="auditDataForm">
        <template v-if="dialogTitle==='审核页面'">
          <div class="singleAuditContent">
            <el-form-item label="用户昵称:">
              <span>{{ auditData.nickName }}</span>
            </el-form-item>
            <el-form-item label="手机号:">
              <span>{{ auditData.mobile }}</span>
            </el-form-item>
            <el-form-item label="发布时间:">
              <span>{{ formatDate(auditData.createdAt, 'YYYY-MM-DD HH:mm:ss') }}</span>
            </el-form-item>
            <el-form-item label="标题:">
              <span>{{ auditData.title }}</span>
            </el-form-item>
            <el-form-item label="内容:">
              <span>{{ auditData.content }}</span>
            </el-form-item>
            <el-form-item label="分类标签:">
              <span>{{ auditData.categoryDesc }}</span>
            </el-form-item>
            <el-form-item label="图片/视频:">
              <viewer :images="auditData.resourceObjectList">
                <div v-for="(item,index) in auditData.resourceObjectList" :key="index" style="display:inline-block;margin-right:5px;">
                  <video v-if="auditData.type===8" :src="item.resourceUrl" controls preload loop="loop" autoplay="autoplay" crossorigin="anonymous" class="resource_img">
                    <source :src="item.resourceUrl" type="video/mp4">
                    <source :src="item.resourceUrl" type="video/ogg">
                    <center>你的浏览器不支持这种格式的视频播放，请换个浏览器试试</center>
                  </video>
                  <img v-if="auditData.type===2||auditData.type===4" :src="item.resourceUrl" class="resource_img" />
                </div>
              </viewer>
            </el-form-item>
          </div>
        </template>
        <template v-else>
          <ul class="batchAuditContent">
            <li v-for="(auditItem,index) in multiSelectAuditList" :key="index">
              <el-row>
                <el-col :span="22">
                  <p>{{ auditItem.content }}</p>
                  <viewer class="batchAuditImg" :images="auditItem.resourceObjectList">
                    <div v-for="(i,idx) in auditItem.resourceObjectList" :key="idx" style="display:inline-block;margin-right:5px;">
                      <video v-if="auditItem.type===8" :src="i.resourceUrl" controls preload loop="loop" autoplay="autoplay" crossorigin="anonymous" width="60" height="60">
                        <source :src="i.resourceUrl" type="video/mp4">
                        <source :src="i.resourceUrl" type="video/ogg">
                        <center>你的浏览器不支持这种格式的视频播放，请换个浏览器试试</center>
                      </video>
                      <img v-if="auditItem.type===2||auditItem.type===4" :src="i.resourceUrl" alt="评价图片" class="img">
                    </div>
                  </viewer>
                </el-col>
                <el-col :span="2">
                  <i class="el-icon-circle-close" @click="delBatchAuditList(index,auditItem)"></i>
                </el-col>
              </el-row>
            </li>
          </ul>
        </template>
        <div class="bodyBottom">
          <el-form-item v-if="dialogTitle==='审核页面'" label="封面图:">
            <el-upload
              class="avatar-uploader"
              accept="image/*"
              name="file"
              :show-file-list="false"
              :action="upladUrl"
              :on-success="editUpvideoImg"
            >
              <img id="upvideo_img" :src="coverMap" />
            </el-upload>
          </el-form-item>
          <el-form-item label="备注:" prop="auditRemarks" :rules="commonRules.notNullRule">
            <el-input v-model="auditDataForm.auditRemarks" type="textarea" placeholder="输入审核备注" style="width:80%"></el-input>
          </el-form-item>
          <div style="textAlign:center">
            <el-button type="primary" size="mini" @click="dialogTitle==='审核页面'? auditButton(1,[auditId]) : auditButton(1,ids)">审核通过</el-button>
            <el-button type="primary" size="mini" @click="dialogTitle==='审核页面'? auditButton(0,[auditId]) : auditButton(0,ids)">审核未通过</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'zhongCaoAudit',
  data() {
    return {
      keywords: '',
      listQuery: {
        status: '',
        type: '',
        categoryId: '',
        endTime: '',
        startTime: '',
        keyWords: '',
        pageNo: 1,
        pageSize: 10
      },
      statuses: [], // 审核分类
      categories: [], // 筛选分类
      types: [], // 筛选类型
      rangeTime: [], // 时间
      listLoading: false,
      list: [],
      auditNum: 0,
      listTotal: 0, // 总条数
      auditDialogVisible: false, // 是否显示弹框
      auditId: 0,
      dialogTitle: '',
      multiSelectList: [], // 多选
      multiSelectAuditList: [],
      auditData: {},
      applyFail: {
        reason: ''
      },
      btnDisabled: false,
      auditDataForm: {
        auditRemarks: ''
      },
      coverMap: '', // 封面图
      ids: []
    }
  },
  created() {
    this.getList()
    this.getCategories()
  },
  methods: {
    // auditNo() {
    //   this.listQuery.pageNo = 1
    //   this.listQuery.status = 2
    //   this.getList()
    // },
    // 搜索
    search() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      this.listQuery.keyWords = this.keywords.replace(/\s*/g, '')
      if (this.rangeTime) {
        if (this.rangeTime.length > 0) {
          this.listQuery.startTime = this.rangeTime[0]
          this.listQuery.endTime = this.rangeTime[1]
        } else {
          this.listQuery.startTime = ''
          this.listQuery.endTime = ''
        }
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
      this.request({
        url: '/zhongcao-web-manage/social-material/zhongcao-list',
        method: 'get',
        params: this.listQuery
      }).then((res) => {
        this.list = res.data
        this.listTotal = res.totalCount
        this.listLoading = false
        // this.auditNum = res.data.auditNum
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    getCategories() {
      this.request({
        url: '/zhongcao-web-manage/social-material/search-condition',
        method: 'get',
        params: {
          type: 0
        }
      }).then((res) => {
        this.statuses = res.data.statuses
        this.categories = res.data.categories
        this.types = res.data.types
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    // 拿到表格的数据
    handleSelectionChange(val) {
      this.multiSelectList = val
    },
    // 批量审核
    batchAuditFun() {
      if (this.multiSelectList.length <= 0) {
        this.$message({
          type: 'info',
          message: '请勾选要审核的内容'
        })
        this.auditDialogVisible = false
      } else {
        this.auditDialogVisible = true
        this.dialogTitle = '批量审核'
        this.auditDataForm.auditRemarks = ''
        this.multiSelectAuditList = this.multiSelectList
        this.ids = []
        this.multiSelectAuditList.map((item) => {
          this.ids.push(item.id)
        })
      }
    },
    delBatchAuditList(index, auditItem) {
      this.multiSelectAuditList.splice(index, 1)
      this.$refs.multipleTable.toggleRowSelection(auditItem)
      if (this.multiSelectAuditList) {
        this.ids = []
        this.multiSelectAuditList.map((item) => {
          this.ids.push(item.id)
        })
      } else {
        this.ids = []
      }
    },
    // 单页面审核/修改
    auditLook(row, type) {
      this.auditDialogVisible = true
      this.dialogTitle = '审核页面'
      this.getData(row.id, type)
    },
    getData(id, type) {
      this.auditId = id
      this.request({
        url: '/zhongcao-web-manage/social-material/zhongcao-get-detail',
        method: 'get',
        params: {
          id: id
        }
      }).then((res) => {
        this.auditData = res.data
        // 封面图
        if (this.auditData.type === 8) {
          this.findvideocover()
        } else if (this.auditData.type === 2 || this.auditData.type === 4) {
          this.coverMap = this.auditData.resourceObjectList[0].resourceUrl
        }
        if (type === 'audit') {
          this.auditDataForm.auditRemarks = ''
        } else {
          this.auditDataForm.auditRemarks = this.auditData.refuseCause
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 将视频的第一帧转换成图片
    findvideocover() {
      const that = this
      this.$nextTick(() => {
        const video = document.querySelector('.resource_img')
        const source = document.createElement('source')
        source.src = this.auditData.resourceObjectList[0].resourceUrl
        source.type = 'video/mp4'
        video.appendChild(source)
        video.addEventListener('loadeddata', function() {
          const canvas = document.createElement('canvas')
          canvas.width = this.videoWidth
	      	canvas.height = this.videoHeight
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
          const imgsrc = canvas.toDataURL('image/jpeg')
          that.coverMap = imgsrc
        })
      })
    },
    // 更改封面图
    editUpvideoImg(res, file) {
      this.coverMap = URL.createObjectURL(file.raw)
    },
    // 是否审核通过
    auditButton(operatorType, ids) {
      this.$refs.auditDialogForm.validate(valid => {
        if (!valid) {
          return false
        }
        this.request({
          url: '/zhongcao-web-manage/social-material/zhongcao-operator',
          method: 'post',
          data: {
            ids: ids,
            operatorType: operatorType,
            remark: this.auditDataForm.auditRemarks
          }
        }).then((res) => {
          if (res.status === 200) {
            this.getList()
            this.auditDialogVisible = false
            operatorType === 1 ? this.$message.success('审核通过') : this.$message.success('审核未通过')
          }
        }).catch(err => {
          this.auditDialogVisible = false
          console.log(err)
        })
      })
    }
  }
}
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
    .resourceImg{
        width: 60px;
        height: 60px;
    }
    .el-col-3 {
        margin-right: 10px;
    }
    #auditDialog {
      .resource_img{
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 10px;
      }
      .el-dialog__body{
        padding:25px 0px 30px;
      }
      .el-form{
        width: 100%;
        font-size:60px;
      }
      .singleAuditContent{
        @include scrollbar(8);
        height: 350px;
        overflow-y: scroll;
      }
      .bodyBottom{
        border-top: 1px solid #909399;
        padding-top: 22px;
        .avatar-uploader .el-upload{
          width: 60px;
          height: 60px;
        }
        #upvideo_img{
          width: 60px;
          height: 60px;
        }
      }
      .batchAuditContent{
        margin: 0px 30px;
        li{
          margin-top: 20px;
          border-bottom: 1px solid#909399;
          &:first-child{
            margin-top: 0px;
          }
          &:last-child{
            border-bottom: none;
          }
          p{
            margin-bottom: 10px;
            font-size: 16px;
          }
          .batchAuditImg{
            img{
              width: 60px;
              height: 60px;
            }
          }
          .el-icon-circle-close{
            color: red;
            font-size: 22px;
            margin-left: 10px;
          }
          .el-row{
            margin-bottom: 20px;
          }
        }
      }
    }
</style>
